<template>
  <div class="box" v-bind:class="[dailogbox?'dailog':'']">
    <header class="header">
      <p @click="dailog">
        全部
        <span></span>
      </p>
    </header>
    <div class="content">
      <div v-if="show" class="show" style>
        <ul>
          <li class="all">全部观看</li>
          <li>只看男生</li>
          <li class="onlyG">只看女生</li>
        </ul>
        <button class="quit" @click="dailog">取消</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/lib/reset.scss";
.header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  p {
    font-size: 0.18rem;
    color: #000000;
    font-weight: 600;
    span {
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 0.05rem solid transparent;
      border-right: 0.05rem solid transparent;
      border-top: 0.09rem solid black;
    }
  }
}
.dailog {
  background-color: #aaaaaa;
}
.content {
  .show {
    z-index: 1000;
    position: fixed;
    bottom: 0.11rem;
    left: 0.135rem;
    ul {
      border: 0.01rem solid #aaaaaa;
      border-radius: 0.1rem;
      font-size: 0.18rem;
      color: #999999;
      margin-bottom: .5rem;
      background-color: #fff;
      li {
        text-align: center;
        line-height: 0.5rem;
        width: 3.46rem;
        height: 0.5rem;
        border-top: 0.01rem solid #aaaaaa;
      }
      .all {
        border-top: none;
      }
      .onlyG {
        margin-bottom: 0.045rem;
      }
    }
    button {
      width: 3.465rem;
      height: 0.5rem;
      border: 0.01rem solid #aaaaaa;
      border-radius: 0.1rem;
      margin-top: 0.045rem;
      background-color: #fff;
    }
    .quit {
      z-index: 1000;
      position: absolute;
      bottom: 0rem;   
    }
  }
}
</style>


<script>
export default {
  data() {
    return {
      msg: 123,
      show: false,
      dailogbox: false
    };
  },
  methods: {
    dailog(e) {
      this.show = !this.show;
      this.dailogbox = !this.dailogbox;
    }
  }
};
</script>